<template>
  <div class="shopList" style="margin:24px 24px 0 24px;">
    <div class="disFlex Flex-middle search shadow">
      <Form
        :model="formItem"
        :label-width="120"
        style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 100px;"
        class="searchForm"
      >
        <FormItem label="角色筛选">
          <Select v-model="formItem.is_super_user" style="width:150px">
            <Option value="0">普通用户</Option>
            <Option value="1">管理员</Option>
          </Select>
        </FormItem>
        <FormItem label="账号状态">
          <Select v-model="formItem.is_enable" style="width:150px">
            <Option value="0">禁用</Option>
            <Option value="1">开启</Option>
          </Select>
        </FormItem>
        <FormItem label="账号名称">
          <Input v-model="formItem.searchKeyword" placeholder="请输入账号名称" style="width:150px"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchData">搜索</Button>
        </FormItem>
      </Form>
    </div>
    <TableList
      :columns="columns"
      :data="data"
      :page="page"
      :total="pageTotal*pageNum"
      :pageNum="pageNum"
      :newOne="is_super_user == 1?'新建账号':''"
      @newOneFn="newOne"
      @changePage="changePage"
    ></TableList>
    <Modal v-model="showEditAccount" @on-ok="saveAccount(1)">
      <p slot="header" style="text-align:center">
        <!-- <span>{{accountModelTitle}}</span> -->
      </p>
      <div style="max-width: 90%;" class="flex center column-center">
        <Form
          ref="accountForm"
          :model="accountForm"
          :rules="rule"
          label-position="left"
          :label-width="80"
        >
          <FormItem label="账号" prop="f_account">
            <Input
              style="width: 200px;"
              size="default"
              v-model="accountForm.username"
              placeholder="请输入用户账号"
            ></Input>
          </FormItem>
          <!--  <FormItem label="昵称" prop="nickname">
                        <Input v-model="accountForm.nickname" placeholder="请输入用户昵称"></Input>
          </FormItem>-->
          <FormItem label="密码" prop="f_password">
            <Input
              style="width: 200px;"
              size="default"
              v-model="accountForm.user_password"
              type="password"
              placeholder="请输入用户密码"
            ></Input>
          </FormItem>
          <FormItem label="角色" prop="role">
            <Select
              size="default"
              :disabled="c_user_level==2"
              v-model="accountForm.is_super_user.toString(10)"
              style="width:200px; min-width: 120px;"
            >
              <Option v-if="accountForm.is_super_user == 1" value="1">管理员</Option>
              <Option value="0">普通成员</Option>
            </Select>
          </FormItem>
          <FormItem label="生效时间">
            <DatePicker
              v-model="accountForm.time_effect"
              type="datetime"
              placeholder="Select date"
              style="width: 200px"
            ></DatePicker>
          </FormItem>

          <div v-if="accountForm.is_super_user == 1 && accountForm.username">
            <FormItem label="失效时间">
              <Input
                disabled
                style="width: 200px;"
                size="default"
                v-model="accountForm.time_failure"
              ></Input>
            </FormItem>
          </div>
          <div v-else>
            <FormItem label="失效时间">
              <DatePicker
                v-model="accountForm.time_failure"
                type="datetime"
                placeholder="Select date"
                style="width: 200px"
              ></DatePicker>
            </FormItem>
          </div>

          <FormItem label="是否启用" prop="status">
            <Switch size="default" v-model="accountForm.is_enable"></Switch>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <div class="flex column-center center model-footer">
          <Button @click="saveAccount" type="primary">保存</Button>
          <Button @click="showEditAccount=false">取消</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/components/consumer/tableList";
import {
  AccountList,
  AccountUpdate,
  AccountRecycle,
  AccountCreate
} from "api/recuit/user";

export default {
  name: "",
  data () {
    const validatePass = (rule, value, callback) => {
      if (value.trim() === "") {
        callback(new Error("用户密码不能为空"));
      } else {
        if (!/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[a-zA-Z]).{8,16}$/.test(value)) {
          callback(new Error("8-16位字母和数字，不含特殊字符"));
        } else {
          callback();
        }
      }
    };
    return {
      formItem: {
        is_super_user: "",
        is_enable: "",
        searchKeyword: ""
      },
      // 表单结构
      accountForm: {
        // 用户id
        user_id: "",
        // 用户账号名
        username: "",
        // 用户密码
        user_password: "",
        // 用户角色 1-管理员，0-普通成员
        is_super_user: "0",
        // 用户状态 0-正常,1-禁用
        is_enable: "1",
        // 生效时间
        time_effect: "",
        // 失效时间
        time_failure: ""
      },
      columns: [
        {
          title: "账号",
          key: "username",
          width: 180
        },
        {
          title: "角色",
          key: "action",
          width: 160,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  marginLeft: "15px"
                }
              },
              params.row.is_super_user == 0 ? "普通成员" : "管理员"
            );
          }
        },
        {
          title: "生效时间",
          key: "time_effect",
          width: 220
        },
        {
          title: "失效时间",
          key: "time_failure",
          width: 220
        },
        {
          title: "状态",
          key: "is_enable",
          width: 100,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  marginLeft: "15px"
                }
              },
              params.row.is_enable == 0 ? "关闭" : "开启"
            );
          }
        },
        {
          title: "操作",
          key: "action",
          width: 250,
          align: "center",
          render: (h, params) => {
            //是否是管理员
            if (this.is_super_user == 1) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        // this.show(params.index);
                        this.getItemData(params.index);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        AccountRecycle({
                          user_id: params.row.user_id
                        }).then(result => {
                          this.$Message.success("删除成功");
                          setTimeout(() => {
                            this.getData();
                          }, 1500);
                        });
                      }
                    }
                  },
                  "删除"
                )
              ]);
            } else {
              if (params.row.user_id == localStorage.getItem("user_id")) {
                return h("div", [
                  h(
                    "Button",
                    {
                      props: {
                        type: "primary",
                        size: "middle"
                      },
                      style: {
                        margin: "0 2px"
                      },
                      on: {
                        click: () => {
                          // this.show(params.index);
                          this.getItemData(params.index);
                        }
                      }
                    },
                    "编辑"
                  )
                ]);
              }
            }
          }
        }
      ],

      data: [],
      showEditAccount: false,
      page: 0,
      pageNum: 5, //显示条数
      jobSum: 0, //职位总数
      auditStatus: 1, //查询状态
      pageTotal: 0, //页面总数
      isAdd: false
    };
  },
  components: {
    TableList
  },

  mounted () {
    this.user_id = localStorage.getItem("user_id");
    this.is_super_user = localStorage.getItem("is_super_user");
    this.getData();
  },

  methods: {
    //切换页面
    changePage (data) {
      let { page } = data;
      this.page = --page;
      this.getData();
    },
    //条件查询
    searchData () {
      this.page = 0;
      this.getData();
    },
    // 更新用户信息
    updateAccount () {
      let account = JSON.parse(JSON.stringify(this.accountForm));
      // 时间处理
      account.time_effect = +this.accountForm.time_effect / 1000;
      account.time_failure = +this.accountForm.time_failure / 1000;

      // 密码为空移除密码
      if (account.user_password == "") {
        delete account.user_password;
      }
      // 是否禁用处理
      account.is_enable = account.is_enable ? 1 : 0;

      AccountUpdate(account)
        .then(result => {
          this.$Message.success("保存成功");
          setTimeout(() => {
            this.showEditAccount = false;
            this.getData();
          }, 1500);
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    newOne () {
      this.isAdd = true;
      this.showEditAccount = true;
    },
    // 创建新用户
    createAccount () {
      let account = JSON.parse(JSON.stringify(this.accountForm));
      // 时间处理
      account.time_effect = +this.accountForm.time_effect / 1000;
      account.time_failure = +this.accountForm.time_failure / 1000;
      // 是否禁用处理
      account.is_enable = account.is_enable ? 1 : 0;
      AccountCreate(account)
        .then(result => {
          this.$Message.success("创建成功");
          setTimeout(() => {
            this.showEditAccount = false;
            this.getData();
          }, 1500);
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    // 点击更新用户数据事件
    saveAccount () {
      this.$refs.accountForm.validate(valid => {
        if (valid) {
          if (this.isAdd) {
            // 创建新用户
            this.createAccount();
          } else {
            // 更新用户数据
            this.updateAccount();
          }
        } else {
          this.$Message.error("请填写完整信息!");
        }
      });
    },
    //获取编辑数据
    getItemData (index) {
      let accountList = JSON.parse(JSON.stringify(this.data[index]));
      accountList.time_effect = accountList.time_effect;
      accountList.time_failure = accountList.time_failure;
      accountList.user_password = "";
      this.accountForm = accountList;
      if (this.accountForm.is_enable) {
        this.accountForm.is_enable = true;
      } else {
        this.accountForm.is_enable = false;
      }
      this.showEditAccount = true;
    },
    //获取数据
    getData () {
      let page = this.page;
      let pageNum = this.pageNum;
      let formItem = this.formItem;
      let dataList = new Object();
      dataList.page = ++page;
      dataList.pageNum = pageNum;
      //获取查询条件
      for (let i in formItem) {
        dataList[i] = formItem[i];
      }
      AccountList(dataList).then(res => {
        let { accountList, page } = res;
        this.data = accountList;
        this.page = Number(page.page)
        // for (let i = 0; i < accountList.length; i++) {
        //   if (accountList[i].user_id == this.user_id) {
        //     this.accountForm = accountList[i];
        //     if (this.accountForm.is_enable) {
        //       this.accountForm.is_enable = true;
        //     } else {
        //       this.accountForm.is_enable = false;
        //     }
        //   }
        // }
        console.log(this.data, "cecece");
        // this.companySum = userSaasCount;
        this.pageTotal = page.pageTotal;
      });
    }
  }
};
</script>

<style scoped lang="less">
/*表头标题*/
.table-header-title {
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;
}

/*表头提示图标*/
.table-header-icon {
  font-size: 20px;
  margin-left: 10px;
}

/*弹窗标题*/
.alert-title {
  margin-top: 10px;
}

/*搜索*/
.search {
  padding: 18px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 24px;
}

/*搜索下拉*/
.search-select {
  min-width: 128px;
  width: 128px;
  margin-right: 15px;
}

/*搜索输入框*/
.search-input {
  margin-right: 15px;
  top: 0;
}

.search-button {
  /* width: 80px;
    min-width: 80px; */
  margin-left: 15px;
}
.timeSpan {
  margin: 0 15px;
}
.detailTable::-webkit-scrollbar {
  width: 15px;
}
.detailTable tr {
  width: 700px;
}
.searchForm {
  .ivu-form-item {
    margin-bottom: 0;
  }
}
</style>
